<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	template="/layout/template.xhtml" xmlns:a4j="http://richfaces.org/a4j">
	<ui:define name="stylefms">
		<link href="/stylesheet/theme.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/fms.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/panel.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/debug.css" rel="stylesheet" type="text/css" />
	</ui:define>
	<ui:define name="varProjectName">
		<ui:param name="projectName"
			value="#{appRes['mod.fms.fms.maintenances.referencias']}" />
	</ui:define>

	<ui:define name="body">

		<a4j:form ajaxSingle="true">
			<rich:panel style="width:500px" styleClass="operation_form" >
			<f:facet name="header"><h:outputText value="Tipo de operacion a realizar" /></f:facet>
			<h:panelGrid styleClass="operation_help" id="help">Ayuda</h:panelGrid>
				<h:selectOneRadio id="mainRadio" value="#{editRef.operation}">
					<f:selectItem id="new" itemLabel="Nuevo Registro" itemValue="newRef"/>
										
					<f:selectItem id="upd" itemLabel="Modificar Registro" itemValue="updRef" />
					
					<f:selectItem id="add" itemLabel="Agregar Registro" itemValue="addRef" />
					
					<a4j:support event="onclick" actionListener="#{editRef.changeOperation}" reRender="mainTabs" />
				</h:selectOneRadio>
				<rich:toolTip for="help" mode="ajax">
					<h:panelGrid  style="width:300px">
					<ol>
					 <li>Nuevo Registro: Inserta un nuevo registro.</li>
					 <li>Modificar Registro: Modificar o dar de baja a una persona.</li>
					 <li>Agregar a Registro: Agregar nuevos registros, tales como direcciones, documentos o telefonos.</li>
					 </ol>
					</h:panelGrid>
				</rich:toolTip>
			</rich:panel>

		</a4j:form>
		
		<rich:tabPanel id="mainTabs" switchType="ajax" selectedTab="#{editRef.selectedTab}" >
		<rich:tab label="Nuevo Registro" id="newRef" ajaxSingle="true">
		<a4j:form id="RefForm" ajaxSingle="true">
		
			<!-- ************************************ -->
			<!-- *****  REF HEADER  ***** -->
			<!-- ************************************ -->
			<rich:panel styleClass="form">
			<f:facet name="header"><h:outputText value="Datos de la Referencia" /></f:facet>
					
					    <s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Codigo</ui:define>
							<h:inputText id="refHeadCode" maxlength="20"
								value="#{editRef.refHead.cod}"
								required="true" size="30"
								requiredMessage="Favor introduzca la descripcion"
								validatorMessage="El codigo no puede ser menor a 1 o mayor a 10">
								<f:validateLength minimum="1" maximum="10" />
								<a4j:support event="onblur" />
							</h:inputText>
							<div class="msg_container">
								<rich:message for="refHeadCode" />
							</div>
						</s:decorate>
						<div style="clear: both;" />
					
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Descripcion</ui:define>
							<h:inputText id="RefDesc" maxlength="20"
								value="#{editRef.refHead.descrip}"
								required="true" size="50"
								requiredMessage="Favor introduzca la descripcion"
								validatorMessage="La descripcion no puede ser menor a 3 o mayor a 50">
								<f:validateLength minimum="3" maximum="50" />
								<a4j:support event="onblur" />
							</h:inputText>
							<div class="msg_container">
								<rich:message for="RefDesc" />
							</div>
						</s:decorate>
						<div style="clear: both;" />					
			</rich:panel>
		</a4j:form>


		<!-- *************************************** -->
		<!-- *********  REF DETAIL  ********* -->
		<!-- *************************************** -->
			
		<a4j:form id="RefDetForm" ajaxSingle="true">
			<rich:simpleTogglePanel styleClass="form" switchType="ajax" opened="false" ajaxSingle="true" >
			<f:facet name="header"><h:outputText value="Agregar Detalle" /></f:facet>
				<h:panelGrid>
					<div class="attributes">
					    <div style="clear: both;" />
						
						<div style="clear: both;" />
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Descripcion</ui:define>
							<h:inputText id="DetDesc" maxlength="40"
								value="#{editRef.refDet.descrip}"
								required="true" size="30"
								requiredMessage="Favor introduzca la descripcion"
								validatorMessage="La descripcion no puede ser menor a 3 o mayor a 40">
								<f:validateLength minimum="3" maximum="40" />
								<a4j:support event="onblur" ajaxSingle="true"/>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="DetDesc" />
							</div>
						</s:decorate>
						<div style="clear: both" />
						
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Descripcion Abrev.</ui:define>
							<h:inputText id="DetDescAbrv" maxlength="10"
								value="#{editRef.refDet.shortname}"
								required="false" size="30"
								requiredMessage="Favor introduzca la descripcion abreviada"
								validatorMessage="La descripcion no puede ser menor a 3 o mayor a 10">
								<f:validateLength minimum="3" maximum="10" />
								<a4j:support event="onblur" ajaxSingle="true"/>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="DetDescAbrv" />
							</div>
						</s:decorate>
						<div style="clear: both" />
						
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Activo</ui:define>
							<h:selectBooleanCheckbox id="DetActive"
								value="#{editRef.refDet.status}">
								<a4j:support event="onblur" ajaxSingle="true" />
								<a4j:support event="onclick" ajaxSingle="true">
									<s:conversationId />
								</a4j:support>
							</h:selectBooleanCheckbox>
							<div class="msg_container">
								<rich:message for="DetActive" />
							</div>
						</s:decorate>
						
					</div>
						<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form">
							<a4j:commandButton id="AddDet" value="Agregar Detalle" styleClass="button"
							action="#{editRef.fillRefDetList()}" reRender="RefDetForm, DetGridForm" process="RefDetForm"/>
							
						
		
							<rich:spacer width="20px" />
							
							<a4j:region id="DetDelRegion">
								<a4j:commandButton value="Eliminar Seleccionados" action="#{editRef.deleteRefDet()}"
									reRender="DetGridForm" styleClass="button" />
							</a4j:region>
		
						</s:decorate>
				</h:panelGrid>
			</rich:simpleTogglePanel>
		</a4j:form>
		
		<a4j:form id="DetGridForm" ajaxSingle="true">
			<rich:datascroller align="center" for="DetGrid"
				maxPages="15" page="#{dataTableScrollerBean.scrollerPage}"
				renderIfSinglePage="false" />
					   			
			<div style="clear: both;" />
			<rich:panel styleClass="table_add" rendered="#{not empty editRef.refDetCollection}">
			<rich:dataTable id="DetGrid"
				var="det" rows="3"
				value="#{editRef.refDetCollection}"
				rendered="#{not empty editRef.refDetCollection}"
				rowClasses="rvgRowOne,rvgRowTwo"
				style="width:70%; margin-left:15%;">
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Codigo Cab" /></f:facet>
					
					<h:outputText value="#{det.headCode}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Descripcion" /></f:facet>
					
					<h:outputText value="#{det.descrip}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Descripcion Abrev." /></f:facet>
					
					<h:outputText value="#{det.shortname}" />
				</rich:column>

				<rich:column>
					<f:facet name="header"><h:outputText value="Activo" /></f:facet>
					
					<h:outputText value="#{convertAssist.booleanToString(det.status)}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Operaciones" /></f:facet>
					
					<h:selectBooleanCheckbox id="check" value="#{editRef.checkDet}" immediate="false" >
						
						<a4j:support event="onmouseover" ajaxSingle="true">
							<a4j:actionparam name="remove" value="#{det.descrip}" assignTo="#{editRef.deleteDet}"></a4j:actionparam>
						</a4j:support>
						
						<a4j:support id="checkSupport" event="onchange" ajaxSingle="true"  action="#{editRef.detDeleteList()}">
						</a4j:support>
						
					</h:selectBooleanCheckbox>
					<rich:toolTip value="Seleccionar elemento a eliminar" for="check" />
				</rich:column>

			</rich:dataTable>
			</rich:panel>
			
		</a4j:form>
		
		<a4j:region>		
		<a4j:form id="DetAction" ajaxSingle="true">
		<rich:panel styleClass="action_form">
			<h:panelGrid>
				<s:decorate template="/layout/displayButton.xhtml"
					styleClass="button_form">
					<a4j:commandButton value="Guardar" id="SaveButton"
						action="#{editRef.saveNewData()}"
						styleClass="button" reRender="RefForm, RefDetForm, DetGridForm" process="RefForm" status="stateStatus">
						
					</a4j:commandButton>
					<rich:spacer width="5px" />
					<a4j:status id="stateStatus" styleClass="status_msg">
							<f:facet name="start">
								<h:graphicImage value="/img/ajax/ajax_load_02.gif"/>
							</f:facet>
					</a4j:status>
					<rich:spacer width="20px" />
					<a4j:commandButton value="Cancelar"
						action="#{editRef.cancelData()}"
						reRender="RefForm" styleClass="button"
						oncomplete="window.location.reload()"/>

				</s:decorate>
			</h:panelGrid>
			</rich:panel>
		</a4j:form>
		</a4j:region>
		
		
		</rich:tab>
		
		<rich:tab label="Modificar Ref" id="updRef" ajaxSingle="true">
				<a4j:region>
					<a4j:include viewId="/fms/fms/maintenances/fmsRefModify.xhtml" />
				</a4j:region>

			</rich:tab>
		
		<rich:tab label="Agregar a Ref" id="addRef"  ajaxSingle="true">
			
		</rich:tab>

		</rich:tabPanel>
		

	</ui:define>
</ui:composition>